<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>我的微信管理</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
  <link rel="stylesheet" th:href="@{/css/index.css}">
  <link rel="stylesheet" th:href="@{/css/manage.css}">
</head>
<body>
  <div class="manage-img" style="background-image: url('/img/indexBackground.jpg');background-size: cover;background-attachment: fixed ;min-height: 100%">
  <div>
    <div th:include="common/header"></div>
    <div class="ui container middle mainbody" style="width: 65%;">
<!--      <label class="ui label coral " style="color: coral;font-size: 38px;text-align: center;margin-bottom: 0px">我的微信管理</label>-->
      <input th:value="${session.loginUser.id}" id="userId" type="hidden"/>
      <div class="front">
<!--        <div>-->
<!--          <p>Click here to <a id="signup">注册</a></p>-->
<!--        </div>-->
<!--        <label class="ui label" style="color: #04BE02">已经存放的微信</label>-->
        <table class="ui selectable celled table" style="opacity: 1;width: 1000px;text-align: center;">
          <thead>
          <tr>
            <th colspan="7" style="text-align: center">
              <span><div class="ui label red huge ">已经存放的微信</div></span><span id="signup" style="color: #03A9F4">   切换<i class="ui chevron right icon"></i></span>
            </th>
          </tr>
          <tr>
            <th>id</th>
            <th>微信号</th>
            <th>性别</th>
            <th>学校</th>
            <th>年级</th>
            <th style="width: 130px">个人签名</th>
            <th style="width: 200px">兴趣爱好</th>
          </tr>
          </thead>
          <tbody>
          <tr th:each="wechat,iterStat:${saveWechats}">
            <td>
              <div class="ui yellow circular label" th:text="${iterStat.index+1}"></div>
            </td>
            <td>
              <span><label class="ui blue mini label" th:text="${wechat.wechat}" style="letter-spacing: 0"></label></span>
              <span><label class="ui label mini grey copyBtn" style="padding: 2px;letter-spacing: 1px"
                    th:onclick="copyFun(this,[[${wechat.wechat}]])" th:onmouseover="copyFun(this,[[${wechat.wechat}]])">复制</label></span>
            </td>
            <td>
              <div class="ui black mini label" th:text="男" th:if="${wechat.sex==1}" style="letter-spacing: 0"></div>
              <div class="ui pink mini label" th:text="女" th:if="${wechat.sex==0}" style="letter-spacing: 0"></div>
            </td>
            <td>
              <div class="ui teal mini label" th:text="${wechat.school}" style="letter-spacing: 0"></div>
            </td>
            <td>
              <div class="ui olive mini label" th:text="${wechat.grade}" style="letter-spacing: 0"></div>
            </td>
            <td>
              <div class="ui orange mini label" th:text="${wechat.description}" style="letter-spacing: 0"></div>
            </td>
            <td>
              <div class="ui label mini color" style="letter-spacing: 0;margin-bottom: 2px" th:each="tagName,iterStat:${wechat.tagNames}" th:text="${tagName}"></div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="back">
<!--          <div>-->
<!--            <p>Click here to <a id="login">登陆</a></p>-->
<!--          </div>-->
<!--          <h2 style="color: #008Eb7">已经获取的微信</h2>-->
          <table class="ui selectable celled table" style="opacity: 1;width: 1000px;text-align: center">
            <thead>
            <tr>
              <th colspan="7" style="text-align: center">
                <span><div class="ui label red huge ">已经获取的微信</div></span><span id="login" style="color: #03A9F4">   切换<i class="ui chevron right icon"></i></span>
              </th>
            </tr>
            <tr>
              <th>id</th>
              <th>微信号</th>
              <th>性别</th>
              <th>学校</th>
              <th>年级</th>
              <th style="width: 130px">个人签名</th>
              <th style="width: 200px">兴趣爱好</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="wechat,iterStat:${takeWechats}">
              <td>
                <div class="ui yellow circular label" th:text="${iterStat.index+1}"></div>
              </td>
              <td>
                <span><div class="ui blue mini label" th:text="${wechat.wechat}" style="letter-spacing: 0"></div></span>
                <span><label class="ui label mini grey copyBtn" style="padding: 2px;letter-spacing: 1px"
                       th:onclick="copyFun(this,[[${wechat.wechat}]])" th:onmouseover="copyFun(this,[[${wechat.wechat}]])">复制</label></span>
              </td>
              <td>
                <div class="ui black mini label" th:text="男" th:if="${wechat.sex==1}" style="letter-spacing: 0"></div>
                <div class="ui pink mini label" th:text="女" th:if="${wechat.sex==0}" style="letter-spacing: 0"></div>
              </td>
              <td>
                <div class="ui teal mini label" th:text="${wechat.school}" style="letter-spacing: 0"></div>
              </td>
              <td>
                <div class="ui olive mini label" th:text="${wechat.grade}" style="letter-spacing: 0"></div>
              </td>
              <td>
                <div class="ui orange mini label" th:text="${wechat.description}" style="letter-spacing: 0"></div>
              </td>
              <td>
                <div class="ui label mini color" style="letter-spacing: 0;margin-bottom: 2px" th:each="tagName,iterStat:${wechat.tagNames}" th:text="${tagName}"></div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
    </div>
  </div>
  </div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script th:src="@{/js/clipboard.min.js}"></script>

<script type="text/javascript">
  // 点击sigup触发翻转样式
  $("#signup").click(function() {
    let backHeight = parseInt($(".back").css("height"));
    backHeight+=450;
    $('.manage-img').css("height",backHeight);
    $(".middle").toggleClass("middle-flip");
    $(".back").css("display","");
    $(".front").css("display","none");
  });
  // 点击sigup触发翻转样式
  $("#login").click(function() {
    let frontHeight = parseInt($(".front").css("height"));
    frontHeight+=450;
    $('.manage-img').css("height",frontHeight);
    $(".middle").toggleClass("middle-flip");
    $(".front").css("display","");
    $(".back").css("display","none");
  });
//  复制微信
  function copyFun(that,param){
    $(that).attr("data-clipboard-text",param);
    let clipboard = new ClipboardJS(that);
  }
</script>
<script>
  $(function () {
    let frontHeight = parseInt($(".front").css("height"));
    frontHeight+=450;
    $('.manage-img').css("height",frontHeight);
    let colors = ["red","orange ","yellow ","olive ","green ","teal ","blue","violet ","purple ","pink ","brown","grey","black"]
    $(".color").each(function (i, n) {
      let index = parseInt(Math.random()*1000%13);
      $(this).addClass(colors[index])
    })
  })
</script>
</body>
</html>